<template>
          <div class="playlist" v-show="comIsShow">
             <div class="listhd">
                     <h4 class="">播放列表(<span>{{music.length}}</span>)</h4>
                     <a href="javascript:;" class="Collection" @mouseenter="Collection_enter" @mouseleave="Collection_leave" >
                         <span :class="icon"></span>
                         收藏全部
                     </a>
                    <span class="line"></span>
                     <a href="javascript:;" class="clear" @mouseenter="clear_enter" @mouseleave="clear_leave" @click="clearAll">
                     <span :class="clearIcon"></span>
                     清除
                    </a>
                    <p class="lytit">{{playmusic.songName}}</p>
             </div>
             
              <div class="listbd">
                   <img :src="Bgimg" alt="" class="imgbg">
                    <div class="msk"></div>

                 <div class="songlist" ref="listBox" @wheel.prevent='playList_wheel'>
                           <div class="nocut" v-if="!music.length">
                               <i class="ico-face"></i>
                                你还没有添加任何歌曲<br>
                                去首页  <a href="javascript:;" class="f-tdu">发现音乐</a> ，或在  <a href="javascript:;" class="f-tdu">我的音乐</a> 收听自己收藏的歌单。

                           </div>
       

                           <ul class="Songlist_ul" :style="listScroll" ref="SonglistUl" v-if="music.length">
                         <li v-for="(el,index) in music" :key="el.id" @mouseenter="col_3_isShow(index)" @mouseleave="col_3_isShow_leave" 
                         @click.stop="palySong(index,$event)" class="listSong" :class="index == isStyle? 'listBg':''" ref="li">
                             <div class="col-1"><span class="playicon"></span></div>
                             <div class="col-2"><span class="songName">{{el.songName}}</span></div>
                             <div class="col-3">
                                <div class="icons" v-show="index == isShow">
                                     <i class="icn-del" title="删除" @click.stop="click_delete(index)"></i>
                                     <i class="icn-dl" title="下载" ></i>
                                     <i class="icn-share" title="分享" ></i>
                                     <i class="icn-add" title="收藏" ></i>
                                </div>
                             </div>
                             <div class="col-4">
                               <span class="singerName">{{el.singerName}}</span>
                                  </div> 
                                  
                             <div class="col-5"><span class="songTile">{{el.songTime | formatTime}}</span></div>
                             <div class="col-6"><a href="javascript:;" class="songParer" title="暂无来源" ref="parent"></a> </div>  
                         </li>
                     </ul>
                 </div>
                 <div class="bline" ref="bline">
                     <span class="scroll" @mousedown.prevent="scroll_move" :style="playScroll" ref="scroll_play" v-show="playScroll_isShow"></span>
                 </div>
                 <div class="msk2">
                 </div> 
                 <div class="listlyric textover" ref="lyricBox" @wheel.prevent='lyric_wheel'>
                     <div class="nolyric" v-if="no_lyric">
                         暂时没有歌词<a href="javascript:;">求歌词</a>

                     </div>
                     <div v-if="lyric_com">
                      <div class="nolyric" v-if="!lyric_page ">
                          纯音乐，无歌词
                      </div>
                     <div class="m_lyric" :style="move_lyric" ref="lyric_ul" v-if="lyric_page ">
                    <p v-for="(el,index) in lyric" :key="index" :class="index == timeindex?'z-sel':''">{{el[1]}}
                      
                    </p>
                    </div>
                    </div>       
                 </div>
                 <div class="bline bline-1" ref="bline1">
                        <span class="scroll scroll-1" :style='lyric_srcoll' @mousedown.prevent="lyric_move" ref="lyricScroll" v-if="lyric_page"></span>
                 </div>

              </div>
                  
                
                     
          </div>
</template>

<script>

import axios from 'axios'

export default {
      name:'FooterPlayList',
      data(){
         return{
               music:[],
               //当前播放的歌曲
               playmusic:'',
               isShow:false,
               icon:'icon',
               clearIcon:'clearIcon',
               comIsShow:false,
               listSong:'listSong listBg',
               isStyle:'',
               Bgimg:'',
               listScroll:{
                 top:'0px'   
              },
               // 播放列表的滚动条
               playScroll:{
                   top:'5px',
                   height:'258px',
                   display:'block'
               },
            //  播放列表页面滚动
             playPageScroll:'',
             // 播放列表滚动条是否隐藏
             playScroll_isShow:false,
             lyric:[],
             playtime:'',
             timeindex:'',
             // 歌词移动
             move_lyric:{ 
                 top:'0px',
                 transition:'top 0.7s linear'
               
             },
             // 没有歌词时 关闭歌词移动与高度功能
             lyric_flag:true,
            //  歌词滚动条
             lyric_srcoll:{
                  top:'0px',
                  height:'150px',
                  display:'block'
             },
             lyric_page_move:'',

             // 定时器,控制当前是否需要随播放时间的歌词高亮效果
             settimeout:'',
             timeout:'',
             lyric_page:true,
             lyric_com:true,
             no_lyric:false,
             add_flag:true,

             
         }
      },
      methods:{
      col_3_isShow(index){
              this.isShow = index
      },
      col_3_isShow_leave(){
          this.isShow = -1
      },
      Collection_enter(){
             this.icon = 'icon_enter'
      },
      Collection_leave(){
         this.icon = 'icon'
      },
      clear_enter(){
          this.clearIcon = 'clearIcon_enter'
      },
      clear_leave(){
          this.clearIcon = 'clearIcon'
      },
      //点击播放歌曲
      palySong(index){
     
            this.$bus.$emit('music_details', this.music[index])
            this.Bgimg = this.music[index].normalpicUrl;
       
            this.playmusic = this.music[index]
            // 让选中得歌曲背景改变
            this.isStyle = index;
             
               
           
      },
      //点击删除列表中得歌曲
      click_delete(index){
         this.music.splice(index,1);
   
          //  删除歌曲后 播放列表 的top 值;    28:一行的高度
         if (((this.$refs.SonglistUl.offsetHeight - this.$refs.listBox.offsetHeight) * this.playPageScroll - 28) > 0) {
             this.listScroll.top = -((this.$refs.SonglistUl.offsetHeight - this.$refs.listBox.offsetHeight) * this.playPageScroll - 28) + 'px'
         }else {
             this.listScroll.top = '0'
         }
         

      
        
      },
      // 清空列表中所有歌曲
      clearAll(){
            this.music = [];
        },
    //  歌曲列表滚动条   
      scroll_move(){
        this.$bus.$emit('getMoveEventName','playListScroll')
      },
      playList_wheel(el){
          
      
           //  判断鼠标滚动轮 滑动的方向
        if (this.music.length != 0) {
            
       
          if (el.deltaY > 0) {
              if ( (this.$refs.scroll_play.offsetTop + 6 <= this.$refs.bline.offsetHeight - this.$refs.scroll_play.offsetHeight)) {
                   // 移动 滚动轮
                  this.playScroll.top = this.$refs.scroll_play.offsetTop + 6 + 'px';
                   
                   //  移动播放列表 
                 this.playPageScroll = ((this.$refs.scroll_play.offsetTop + 6) / 
                (this.$refs.bline.offsetHeight - this.$refs.scroll_play.offsetHeight)).toFixed(2);
              

              }else {
                    // 移动 滚动轮
                  this.playScroll.top = this.$refs.bline.offsetHeight - this.$refs.scroll_play.offsetHeight + 'px';
                       //  移动播放列表 
                  this.playPageScroll = 1; 
              }
            
          }else {
              
              if (this.$refs.scroll_play.offsetTop - 6 >= 0) {
                     // 移动 滚动轮
                  this.playScroll.top = this.$refs.scroll_play.offsetTop - 6 + 'px';
                       //  移动播放列表 
                  this.playPageScroll = ((this.$refs.scroll_play.offsetTop - 6) / 
                (this.$refs.bline.offsetHeight - this.$refs.scroll_play.offsetHeight)).toFixed(2);
              }else {
                  // 移动 滚动轮
                  this.playScroll.top = 0;
                       //  移动播放列表 
                  this.playPageScroll = 0; 
              }
              
          }

         }
      },
     
      //歌词滚动条
      lyric_move(){
           this.$bus.$emit('getMoveEventName','lyricScroll')

           //关闭歌词过渡效果
            this.move_lyric.transition = '',

            // 关闭歌词随播放时间滚动效果
            this.lyric_flag = false
      },

      //  鼠标滑轮控制歌词滚动
        lyric_wheel(el){
            if (this.lyric_page) {
                this.lyric_flag = false;
            
            this.move_lyric.transition = '';
          clearTimeout(this.timeout)
              this.timeout = setTimeout( () => {
                 this.lyric_flag = true;
                 this.move_lyric.transition = 'top 0.7s linear';
                
              },1000 )
            
             if (el.deltaY > 0) {
                  if (this.$refs.lyricScroll.offsetTop + 12 < this.$refs.bline1.offsetHeight - this.$refs.lyricScroll.offsetHeight) {
                  this.lyric_srcoll.top = this.$refs.lyricScroll.offsetTop + 12 + 'px';
                  this.lyric_page_move = ((this.$refs.lyricScroll.offsetTop + 12) / (this.$refs.bline1.offsetHeight - this.$refs.lyricScroll.offsetHeight)).toFixed(3) 
                  }else {
                    this.lyric_srcoll.top = this.$refs.bline1.offsetHeight - this.$refs.lyricScroll.offsetHeight + 'px'
                     this.lyric_page_move = 1;
                  }
             
             }else {
                 if (this.$refs.lyricScroll.offsetTop - 12 > 0) {
                      this.lyric_srcoll.top = this.$refs.lyricScroll.offsetTop - 12 + 'px'
                 this.lyric_page_move = ((this.$refs.lyricScroll.offsetTop - 12) / (this.$refs.bline1.offsetHeight - this.$refs.lyricScroll.offsetHeight)).toFixed(3)
                 }else {
                     this.lyric_srcoll.top = 0
                     this.lyric_page_move = 0;
                 }
                
             }
           
        }   
            }
      
     
      },
      
      
      mounted(){
           //  歌曲列表向下滚动
         this.$bus.$on('playListScrolldown', (data) => {
               // 滚动条滑动
               if (this.$refs.scroll_play.offsetTop + data <=  this.$refs.bline.offsetHeight - this.$refs.scroll_play.offsetHeight) {
                   this.playScroll.top = this.$refs.scroll_play.offsetTop + data + 'px';
                    this.playPageScroll =    ((this.$refs.scroll_play.offsetTop + data) / 
                (this.$refs.bline.offsetHeight - this.$refs.scroll_play.offsetHeight)).toFixed(2);
                
                    
               }
                 
         })
          //  歌曲列表上滚动
         this.$bus.$on('playListScrollup', (data) => {
                //  滚动条
              if (this.$refs.scroll_play.offsetTop - data >= 0) {
                     this.playScroll.top = this.$refs.scroll_play.offsetTop - data + 'px';
                     this.playPageScroll = ((this.$refs.scroll_play.offsetTop - data) / 
                (this.$refs.bline.offsetHeight - this.$refs.scroll_play.offsetHeight)).toFixed(2);
             
                
               
                  
              }
          
         });

         //  显示与隐藏这个组件
         this.$bus.$on('isShow_FooterPlayList', () =>{
             this.comIsShow = !this.comIsShow;

              // 根据播放列表的数量，设置滚动条的高度
             if (this.comIsShow) {
                 if (this.music.length > 9) {
                     //显示播放列表滚动条
                    this.playScroll_isShow = true  
                 this.$nextTick(function(){
                     // 播放列表滚动条高度
                    this.playScroll.height =  Math.pow(this.$refs.bline.offsetHeight,2) / this.music.length / 28 + 'px'
                          
                    
                   }) 
                }else {
                     //播放列表滚动条隐藏
                   this.playScroll_isShow = false
                } 
            }
             this.$nextTick(function (){
             
                  // 播放列表滚动条高度
                   this.lyric_srcoll.height = Math.pow(this.$refs.bline1.offsetHeight,2)  / this.lyric.length / 32 + 'px'
             });
            

        //    控制滚动条隐藏
        this.$nextTick(function(){

           if (!this.lyric.length) {
              
                this.lyric_com = false;
                this.lyric_page = false;
               
                
            }else {
               this.lyric_com = true;
               
            }
         })   
                
              
       
             
           
         })

        
         //  将需要播放的歌曲数据发送给播放组件
        this.$bus.$on('musicList', (el) =>{
            this.music.forEach( (element) => {
                if (element.id == el.id) {
                  this.playmusic = element
                    this.add_flag = false;
                    this.Bgimg = element.picUrl;
            
               this.$nextTick( () =>{
                this.$bus.$emit('music_details',element)

                // 让列表中播放中歌曲栏背景颜色改变
                 this.isStyle = this.music.indexOf(element);   
                
                 // 将歌曲数量传递出去
                this.$bus.$emit('SongSum',this.music.length);
                
                
               })
                }
            })
               
             if (this.add_flag) {
                this.music.push({
                   id:el.id,
                   songName:el.name,
                   picUrl:el.al.picUrl + '?param=34y34',
                   normalpicUrl:el.al.picUrl,
                   singerName:el.ar[0].name,
                   songTime:el.dt

               })

             // 当前播放的歌曲  
            this.playmusic = {
                   id:el.id,
                   songName:el.name,
                   picUrl:el.al.picUrl + '?param=34y34',
                   normalpicUrl:el.al.picUrl,
                   singerName:el.ar[0].name,
                   songTime:el.dt

               };
            
                           
                this.Bgimg = el.al.picUrl;
            
               this.$nextTick( () =>{
                this.$bus.$emit('music_details',this.music[this.music.length - 1])

                // 让列表中播放中歌曲栏背景颜色改变
                 this.isStyle = this.music.length - 1;   
                
                 // 将歌曲数量传递出去
                this.$bus.$emit('SongSum',this.music.length);
                
                
               })
             } 
              this.add_flag = true  
               
          
        })
        this.$bus.$on('musicLists', (el) => {
          this.music = [];
            el.forEach(element => {
                 this.music.push({
                   id:element.id,
                   songName:element.name,
                   picUrl:element.al.picUrl + '?param=34y34',
                   normalpicUrl:element.al.picUrl,
                   singerName:element.ar[0].name,
                   songTime:element.dt

               })
            });
             this.playmusic = {
                   id:el[0].id,
                   songName:el[0].name,
                   picUrl:el[0].al.picUrl + '?param=34y34',
                   normalpicUrl:el[0].al.picUrl,
                   singerName:el[0].ar[0].name,
                   songTime:el[0].dt

               };
             this.Bgimg = el[0].al.picUrl;
            
               this.$nextTick( () =>{
                this.$bus.$emit('music_details',this.music[0])

                // 让列表中播放中歌曲栏背景颜色改变
                 this.isStyle = 0;   
                
                 // 将歌曲数量传递出去
                this.$bus.$emit('SongSum',this.music.length);
                
                
               })   

        })
     this.$bus.$on('addPlayLists', (el) => {
       
          el.forEach(element => {
              this.music.forEach( (data) => {
                  if (element.id == data.id) {
                      this.add_flag = false
                  }
              })
               if (this.add_flag) {
                    this.music.push({
                   id:element.id,
                   songName:element.name,
                   picUrl:element.al.picUrl + '?param=34y34',
                   normalpicUrl:element.al.picUrl,
                   singerName:element.ar[0].name,
                   songTime:element.dt

               }) 
               }
               this.add_flag = true
          });
       
          
             
           
     })

         //  通过点击footer组件其他地方，来隐藏此组件
        this.$bus.$on('volume_isshow', (el) => {
           this.comIsShow = el;
           
        }) 
        this.$bus.$on("playTime", (el) => {
            
              if (this.lyric_flag) {
                   // 当前播放的时间
                   this.playtime = el;
             
               for (let k of this.lyric) {
                   
                   if (el > k[0]) {
                       
                    this.timeindex =  this.lyric.indexOf(k)
                   
                   }else {
                       
                       break;
                   }
               }
              }
              

        })

        // 歌词滚动条滑动
        this.$bus.$on('lyricScrolldown', (el) => {
           if (this.$refs.lyricScroll.offsetTop + el <= this.$refs.bline1.offsetHeight - this.$refs.lyricScroll.offsetHeight) {
                // 歌词滚动条
               this.lyric_srcoll.top = this.$refs.lyricScroll.offsetTop + el + 'px';
                     //歌词滚动
               this.lyric_page_move = ((this.$refs.lyricScroll.offsetTop + el) / (this.$refs.bline1.offsetHeight - this.$refs.lyricScroll.offsetHeight)).toFixed(3)
           }
        });
        this.$bus.$on('lyricScrollup', (el) => {
            
             if (this.$refs.lyricScroll.offsetTop - el >= 0) {
                 // 歌词滚动条
               this.lyric_srcoll.top = this.$refs.lyricScroll.offsetTop - el + 'px',
               //歌词滚动
               this.lyric_page_move = ((this.$refs.lyricScroll.offsetTop - el) / (this.$refs.bline1.offsetHeight - this.$refs.lyricScroll.offsetHeight)).toFixed(3)
           }
        });
        this.$bus.$on('lyric_auto_scroll', (el) => {
            clearTimeout(this.settimeout)
              this.settimeout = setTimeout( () => {
                  this.lyric_flag = el;
                  this.move_lyric.transition = 'top 0.7s linear';
              },1000 )
        });


        this.$bus.$on('NextSong', (el) => {
               switch (el) {
                   case 'loop':
                       if (this.music != '') {
                        if (this.isStyle + 1 < this.music.length) {
                        this.$bus.$emit('music_details', this.music[this.isStyle + 1])
                        this.Bgimg = this.music[this.isStyle + 1].normalpicUrl;
                        this.playmusic = this.music[this.isStyle + 1]
                        // 让选中得歌曲背景改变
                         this.isStyle = this.isStyle + 1;
                    }else {
                        
                        this.$bus.$emit('music_details', this.music[0])
                        this.Bgimg = this.music[0].normalpicUrl;
                        this.playmusic = this.music[0]
                        // 让选中得歌曲背景改变
                         this.isStyle = 0;
                       }
                    
                    }
                  break;
                  case 'random':
                     if (this.music != '') {
                        let random = Math.floor(Math.random() * (this.music.length))
                        this.$bus.$emit('music_details', this.music[random])
                        this.Bgimg = this.music[random].normalpicUrl;
                        this.playmusic = this.music[random]
                        // 让选中得歌曲背景改变
                         this.isStyle = random;
                                   
                     }
                  break;

                      
               
                   default:
                       break;
               }
         
        })
         this.$bus.$on('lastSong', () => {
             if (this.music != '') {
                 if (this.isStyle > 0) {
                     this.$bus.$emit('music_details', this.music[this.isStyle - 1])
                        this.Bgimg = this.music[this.isStyle - 1].normalpicUrl;
                        this.playmusic = this.music[this.isStyle - 1]
                        // 让选中得歌曲背景改变
                         this.isStyle = this.isStyle - 1;
                 }else {
                    
                     this.$bus.$emit('music_details', this.music[this.music.length - 1])
                        this.Bgimg = this.music[this.music.length - 1].normalpicUrl;
                        this.playmusic = this.music[this.music.length - 1]
                        // 让选中得歌曲背景改变
                         this.isStyle = this.music.length - 1; 
                 }
             }
         })

          this.$bus.$on('addPlayList', (el) => {
              this.music.forEach( (element) => {
                  if (element.id == el.id) {
                      this.add_flag = false
                  }
              })
               if (this.add_flag) {
                    this.music.push({
                   id:el.id,
                   songName:el.name,
                   picUrl:el.al.picUrl + '?param=34y34',
                   normalpicUrl:el.al.picUrl,
                   singerName:el.ar[0].name,
                   songTime:el.dt

               }) 
               }
                this.add_flag = true
          })
      
   

        
      },
      watch:{
          music(){
              this.$bus.$emit('SongSum',this.music.length);
             
           
          },

        //   播放列表滑动
          playPageScroll(value){
              
              
                 if (this.$refs.SonglistUl.offsetHeight - this.$refs.listBox.offsetHeight > 0) {
                  
                this.listScroll.top = -(this.$refs.SonglistUl.offsetHeight - this.$refs.listBox.offsetHeight) * value + 'px';
            
             
               }
              
           
          },
          //  歌词 滑动
         lyric_page_move(value){
            
                this.move_lyric.top = -(this.$refs.lyric_ul.offsetHeight - this.$refs.lyricBox.offsetHeight) * value + 'px';
                     clearTimeout(this.settimeout)
             
        },  
            

          
         playmusic(){
              axios.get('http://localhost:8080/api/lyric',{
                  params:{
                      id:this.playmusic.id
                  }
              }).then( (response) =>{
                
                  if (response.data.nolyric) {
                       // 没有歌词停止歌词滚动  
                       this.lyric_flag = false;
                       this.lyric_page = false;
                       this.no_lyric = false;
                  }else if (!response.data.needDesc) {
                      
                   
                    // 控制歌词滚动  
                     this.lyric_flag = true;
                     this.lyric_page = true;
                      this.no_lyric = false;
                 
                   // 格式化歌词时间
                var arr =  response.data.lrc.lyric.split('\n');
                arr.splice(arr.indexOf(''),1)
                var newarr = [];
                var arr1 = [];
                var arr2 = [];
                let index = 0
                          for(let k of arr) {
                           
                          
                             newarr.push(k.split(']'))
                          }
                       

                       for(let k of newarr) {
                     
                         arr1.push(k[0].replace("[",'').split(':')) 

                       }
                 
                      for(let k of arr1) {
                       
                         arr2.push( k[0] * 60 + Number(k[1])) 
                      }

                       for (let k of newarr) {
                           k[0] = arr2[index]
                            index++
                        }  
                    this.lyric = newarr   
                    
                   }else {
                      
                       this.no_lyric = true;
                       this.lyric_flag = false;
                       this.lyric_page = false

                   }     
              });
                
             
         },
        timeindex(value){
            // 歌词随播放时间 滚动
           if (value > 3 && value < this.lyric.length - 3) {
             this.move_lyric.top = -(value - 3) * 32 + 'px';

            
              
              this.lyric_srcoll.top = ((value - 3) * 32 / (this.$refs.lyric_ul.offsetHeight - this.$refs.lyricBox.offsetHeight)).toFixed(3)  * (this.$refs.bline1.offsetHeight - this.$refs.lyricScroll.offsetHeight) + 'px'
           }
        
       
        }  
      }
}
</script>

<style scoped>
     .listSong {
         margin: 0 0 0 2px;
         float: left;
         width: 100%;
        
     }
     .listSong:hover {
          background-color: rgba(0, 0, 0, 0.3);
     }
     .listBg {
         background-color: rgba(0, 0, 0, 0.3);
     }
    .playlist {
        position: absolute;
        margin-left: -493px;
        left: 50%;
        bottom: 46px;
        width:986px;
        height:301px; 
      
    }
    .listhd {
         position: relative;
        height: 40px;
        background: url(../images/playlist_bg.png) no-repeat;
        color: #fff;
    }
    h4 {
        position: absolute;
        font-size: 14px;
        line-height: 39px;
        left: 25px;
        
    }
    .icon {
        display: inline-block;
        margin: 1px 0 0 0;
        width: 16px;
        height: 16px;
        background: url(../images/playlist.png) no-repeat -24px 0;
        vertical-align: middle;
        
    }
    .icon_enter {
         display: inline-block;
         margin: 1px 0 0 0;
        width: 16px;
        height: 16px;
          background: url(../images/playlist.png) no-repeat -24px -20px;
          vertical-align: middle;
          
    }
    
    a { 
        
        line-height: 39px;
        color: #ccc;
    }
    .clear {
        position: absolute;
        left: 490px;
    }
    .clear:hover {
        color: #e2e2e2;
    }
  
    .clearIcon {
         display: inline-block;
         
        width: 13px;
        height: 16px;
        background: url(../images/playlist.png) no-repeat -51px 0;
        vertical-align: middle;
    }
    .clearIcon_enter {
         display: inline-block;
        width: 13px;
        height: 16px;
        background: url(../images/playlist.png) no-repeat -51px -20px;
        vertical-align: middle;
    }
    .line {
        position: absolute;
        height: 15px;
        top: 13px;
        left: 477px;
        border-left:1px solid #000;
        border-right:1px solid #2c2c2c ;

    }
    .Collection {
        position: absolute;
        left: 398px;
    }
    .Collection:hover {
        color: #e2e2e2;
    }
    .listbd {
        position: relative;
        padding: 0 5px;
        width: 976px;
        height: 260px;
        overflow: hidden;
        background: url(../images/playlist_bg.png) repeat-y -1014px 0;
    }
    .songlist {
        position: absolute;
        left: 2px;
        width: 553px;
        height: 260px;
        overflow: hidden;
        z-index: 99;
    }
    .col-1 {
        float: left;
        padding-left:10px;
        width: 10px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
    }
    .playicon {
        display: inline-block;
        margin: 8px 0 0 0 ;
        width: 10px;
        height: 13px;
        background: url(../images/playlist.png) no-repeat -182px 0;

    }
        
    
    .col-2 {
        float: left;
        width: 246px;
        padding-left:10px ;
        line-height: 28px;
        height: 28px;
        text-align: left;
        color: #fff;
         white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .col-4 {
        float: left;
        width: 70px;
        padding-left:10px ;
        line-height: 28px;
        height: 28px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      
    }
    .singerName {
        
        color: #fff;
      
        
    }
    .singerName:hover{
        text-decoration: underline;
    }
    .col-3 {
        float: left;
        width: 88px;
        padding-left:10px ;
        height: 28px;
        line-height: 28px;
        overflow: hidden;
    }
    .icn-del {
        float: right;
        
        margin: 7px 0 0 10px;
        width: 13px;
        height: 16px;
        background: url(../images/playlist.png) no-repeat -51px 0;
        cursor:pointer;
       
    }
    .icn-del:hover {
        background: url(../images/playlist.png) no-repeat -51px -20px;
    }
   
    .icn-dl {
        float: right;
        margin: 7px 0 0 10px;
        width: 14px;
        height: 16px;
        background: url(../images/playlist.png) no-repeat -57px -50px;
        cursor:pointer; 
    }
    .icn-dl:hover {
            background: url(../images/playlist.png) no-repeat -80px -50px;
    }
    .icn-share {
        float: right;
        margin: 7px 0 0 10px;
        width: 14px;
        height: 16px;
        background: url(../images/playlist.png) no-repeat 0 0;
        cursor:pointer; 
    }
    .icn-share:hover{
          background: url(../images/playlist.png) no-repeat 0 -20px;
     }
    
    .icn-add {
        float: right;
        margin-top:7px;
        width: 16px;
        height: 16px;
        background: url(../images/playlist.png) no-repeat -24px 0;
        cursor:pointer; 
    }
    .icn-add:hover {
        background: url(../images/playlist.png) no-repeat -24px -20px;
    }
    .col-5  {
        float: left;
        padding: 0 0 0 10px;
        width: 35px;
        height: 28px;
        line-height: 28px;
        color: #fff;
    }
    .col-6 {
        float: left;
        padding: 0 0 0 6px;
        width: 37px;
        height: 28px;
        line-height: 28px;
    }
    .songParer {
        float: right;
        margin: 7px 0 0 10px;
        width: 14px;
        height: 16px;
        background: url(../images/playlist.png) no-repeat -100px 0;
    }
    .imgbg {
        position: absolute;
        left: 2px;
        top: -360px;
        width: 980px;
        height: auto;
        opacity: .2;
        z-index: 1;
    }
    .msk {
        position: absolute;
        left: 2px;
        
        width: 558px;
        height: 260px;
        z-index: 2;
        background-color:#121212;
        opacity: .5;
    }
    .bline {
        position: absolute;
        left: 555px;
        width: 6pX;
        height: 260px;
        background: #000;
        z-index: 2;
        opacity: 0.5;
    }
    .scroll {
        position: absolute;
     
        left: 0;
        width: 4px;
        background: #868686;
        border: 1px solid #a6a6a6;
        border-radius: 5px;
       
        opacity: .8;
        cursor: pointer;
    } 
    .Songlist_ul {
        position: absolute;
        width: 100%;
    }
    .msk2 {
        position: absolute;
        left:560px;
        top: 0;
        width: 420px;
        height: 250px;
        background-color: #121212;
        opacity: .01;
        z-index: 3;
    }
    .listlyric {
        position: absolute;
        right: 40px;
        top: 0;
        margin: 21px 0 20px 0;
        height: 219px;
        width: 354px;
        overflow: hidden;
        text-align: center;
        z-index: 4;

    }
    .lytit {
        position: absolute;
        left: 595px;
        top: 0;
        width: 346px;
        height: 39px;
        line-height: 39px;
        text-align: center;
        font-size: 14px;
        color: #fff;

        overflow: hidden;   
        text-overflow: ellipsis;
        white-space: nowrap;

    } 
    .listlyric p {
        text-align: center;
        line-height: 32px;
        min-height: 32px;
        color: #989898;
        word-wrap: break-word;
        visibility: visible;
        transition: color 0.7s linear;
    }
    .m_lyric {
        position: absolute;
         text-align: center;
       
        width: 100%;
     
    }
    .m_lyric .z-sel {
        color:#fff;
        font-size: 14px;
      
    }
    .listbd .bline-1 {
        left: auto;
        right: 2px;
        
    }
   .listbd .scroll-1 {
        right: 0;
        left: auto;
       
   }
   .nocut {
       padding-top: 85px;
       text-align: center;
       line-height: 43px;
       color: #aaa;
   }
   .ico-face {
       display: inline-block;
       width: 36px;
       height: 29px;
       margin: 0 3px 0 0;
       vertical-align: middle;
       background:url(../images/playlist.png) no-repeat -138px 0 ;
   }
   .f-tdu {
       text-decoration: underline;
       color: #aaa;
   }
   .nolyric {
       padding: 85px 0 0;
       color: #aaa;
       line-height: 43px;
       text-align: center;
   }

 
      

       
   


    
</style>